<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月26日 17:26:13
-->
<template>
  <div class="rightBox">
    <div
      class="gonggaobox"
      @click="
        () => {
          this.$router.push('/announcement');
        }
      "
    >
      <p>公告栏</p>
      <img src="../../../assets/gonggao.jpg" alt />
    </div>
    <div class="adminbox">
      <p class="adminbox-head">
        <span>运营管理</span>
        <span
          class="sq"
          title="申请管理员"
          @click="
            () => {
              this.$router.push('/manager');
            }
          "
          v-if="userInfo && userInfo.Administrator === '2'"
          >申请</span
        >
      </p>
      <div class="adminUser">
        <img src="../../../assets/admin.jpg" alt class="tx" />
        <div class="adminUser-ms">
          <p style="gap: 3px">
            <span>前端江太公</span>
            <img src="../../../assets/rz.png" alt />
            <span class="cguan">超管</span>
          </p>
          <p style="font-size: 12px; color: #ada7a7">公公站长 2022-06-20 加入</p>
        </div>
      </div>
      <div class="adminUser" v-for="(item, index) in adminUser" :key="index">
        <img :src="baseUrl + item.userImg" alt class="tx" />
        <div class="adminUser-ms">
          <p style="gap: 3px">
            <span>{{ item.userName }}</span>
            <img src="../../../assets/rz.png" alt />
            <span class="cguan">管理员</span>
          </p>
          <p style="font-size: 12px; color: #ada7a7">{{ item.createUserDate }} 加入</p>
        </div>
      </div>
    </div>
    <div class="zhidu">———— 请遵循社区运营管理制度 ————</div>
    <div class="footer">
      <p>
        <a href="https://support.qq.com/product/414579" target="_blank"
          >产品建议与问题反馈</a
        >
      </p>
      <p>
        <router-link to="privacy">X站用户隐私服务</router-link>
        <span style="margin: 0 5px">▪</span>
        <router-link to="agreement">X站用户协议</router-link>
      </p>
      <p>
        <a href="https://www.12377.cn/" target="_blank">网上有害信息举报专区</a>
      </p>
      <p>
        <a href="https://ts.isc.org.cn/#/home" target="_blank">互联网信息服务投诉平台</a>
      </p>
      <p>违法和不良信息举报：18307106535@163.com</p>
    </div>
    <div class="code">
      <p>微信公众号</p>
      <img src="../../../assets/gzh.png" alt="" />
    </div>
    <div class="code">
      <a href="https://jiangsihan.cn" target="_blank">
        <p>赞助支持</p>
        <div class="grwz">
          <img
            src="https://jiangsihan.cn/upload/2022/03/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20211230180258-a0a929ca59ea40ec90341d26ca6bca39.jpg"
            alt=""
          />
          <div>
            <p style="margin-top: -10px; margin-bottom: 10px">太公技术博客</p>
            <p style="font-size: 12px">窈窕淑女，君子好逑。</p>
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
import moment from "moment";
export default {
  name: "rightBox",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      adminUser: [],
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/

  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/

  mounted() {
    this.getuserlist();
  },
  /**所有方法*/
  methods: {
    getuserlist() {
      requset("get", "/users/getadminlist", {}).then((res) => {
        if (res.data.code == 200) {
          this.adminUser = res.data.data;
          this.adminUser.forEach((item) => {
            item.createUserDate = item.createUserDate.split(" ")[0];
          });
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.gonggaobox,
.adminbox {
  width: 100%;
  background: #fff;
  border-radius: 3px;
  padding: 15px;
}
.gonggaobox:hover {
  cursor: pointer;
}
.gonggaobox img {
  width: 100%;
}
.gonggaobox p,
.adminbox > p,
.code p {
  margin: 0;
  margin-bottom: 10px;
  font-weight: 600;
}
.adminbox {
  margin-top: 10px;
  height: 350px;
  overflow-y: scroll;
}
/* 修改滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: rgba(255, 228, 228, 0);
}
::-webkit-scrollbar-thumb {
  background-color: rgb(127, 200, 252);
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
.adminUser {
  display: flex;
  padding-bottom: 20px;
}
.adminUser p {
  margin: 0;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}
.adminUser .tx {
  width: 40px;
  height: 40px;
  border-radius: 3px;
}
.adminUser-ms {
  margin-left: 10px;
}
.adminUser-ms img {
  width: 16px;
  height: 16px;
}
.adminUser-ms p {
  margin: 0;
}
.cguan {
  border: 1px solid;
  padding: 0px 5px;
  font-size: 12px;
  border-radius: 3px;
  color: #cf1322;
  background: #fff1f0;
  border-color: #ffa39e;
}
.adminbox-head {
  display: flex;
  justify-content: space-between;
}
.adminbox-head .sq {
  color: #1890ff;
}
.adminbox-head .sq:hover {
  cursor: pointer;
}
.zhidu {
  text-align: center;
  background: #fff;
  padding-bottom: 10px;
  font-size: 12px;
  color: #c4c4c4;
  margin-top: -1px;
}
.footer {
  border-radius: 3px;
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  font-size: 13px;
  color: #1890ff;
}
.code {
  margin-top: 10px;
  border-radius: 4px;
  background: #fff;
  padding-top: 10px;
}
.code p {
  margin: 0;
  margin-left: 10px;
  font-weight: 600;
  color: #000000a6;
}
.code img {
  width: 100%;
}

.grwz {
  padding: 10px;
  display: flex;
  align-items: center;
}
.grwz img {
  width: 60px;
  height: 60px;
}
</style>
